<template>
	<div class="box">
		<div class="weui-cells__title">作业截图</div>
		<img class="wordImg" src='../assets/login.jpg' alt="">
		<div class="weui-cells__title">老师评价</div>
		<p class="content">
			小茗同学作业完成的很好
		</p>
		<group :title="'我的评论'">
			<x-textarea :max="200" name="description" :placeholder="'输入评论...'"></x-textarea>

		</group>
		<x-button type="primary" class='button marginTop'>发表</x-button>
		<div class="weui-cells__title">全部评论(3)</div>
		<div class="comments">

			<ul>
				<li v-for="i in 3">
					<p class="name">小红</p>
					<p>嘻嘻嘻</p>
					<p class="time">09-28</p>
				</li>
			</ul>
		</div>
	<div class="return" @click="goBack">
			<img src="../assets/return.png" alt="">
		</div>
	</div>
</template>
<script>
	import {
		XTextarea,
		Group,
		XInput,
		XButton
	} from 'vux'

	export default {
		components: {
			XTextarea,
			Group,
			XInput,
			XButton
		},
		data() {
			return {

			}
		},
		created() {

		},
		mounted() {


		},
		methods: {
			goBack() {
				this.$router.back();
			},
		},


	}
</script>

<style lang="less" scoped="scoped">
	.box {
		width: 100%;
			.wordImg{
				width: 90%;
				margin-left:5%;
				border-radius: 10px;
				height: auto;
			}
		.content {
			padding: 15px;
			background: #FFF;
		}
.good{
	text-align: right;
	padding:10px 15px 0 15px;
	color: grey;
	font-size: 14px;
	img{
		width: 16px;
		height: 16px;
		vertical-align: sub;
	}
}
		.marginTop {
			margin-top: 10px;
		}

		.comments {

			margin-top: 10px;

			// text-align: center;
			color: #666;
			background: #FFF;

			ul {
				list-style: none;

				li {
					padding: 8px 15px;
					border-bottom: 1px solid #d9d9d9;

					.name {
						font-weight: bold;
					}

					.time {
						font-size: 12px;
						color: #b2b2b2;
					}
				}
			}
		}

		.return {
			width: 32px;
			height: 32px;
			position: absolute;
			top: 10px;
			right: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
